<template>
  <el-descriptions :column="1" title=" " border>
    <el-descriptions-item
      label="订单金额"
      label-class-name="my-label"
      class-name="my-content"
      width="50"
      >￥{{ prop.amount.productRealPrice}}</el-descriptions-item
    >
    <el-descriptions-item label="确认退款金额"
      >￥<el-input :disabled="prop.disabled" v-model:model-value="prop.amount.returnAmount" style="width: 200px;margin-left: 10px;"/></el-descriptions-item
    >
    <el-descriptions-item label="选择收货点"
      >
      <el-select :disabled="prop.disabled" v-model:model-value="prop.amount.companyAddress.addressName">
        <el-option :value="item.addressName" v-for="item,index in prop.amount.addresslist" :key="index"></el-option>
        </el-select>
    </el-descriptions-item
    >
    <el-descriptions-item label="收货人姓名">
      {{ prop.amount.companyAddress.name }}
    </el-descriptions-item>
    <el-descriptions-item label="所在区域" >
      <span>{{ prop.amount.companyAddress.province }}</span>
      <span>{{prop.amount.companyAddress.region }}</span> 
    </el-descriptions-item>
    <el-descriptions-item label="详细地址" >
      {{ prop.amount.companyAddress.detailAddress }}
    </el-descriptions-item>
    <el-descriptions-item label="联系电话" >
      {{prop.amount.companyAddress.phone}}
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
let prop = defineProps<{
  amount:{
    productRealPrice:string;
    returnAmount:string;
    companyAddress:any;
    addresslist:Array<any>
  },
  disabled:boolean,
}>()

</script>
<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>
